<template>
  <div class="main-main readonly" v-loading="loading" target="main-main">
    <!-- <el-container style="height: 100%;" v-loading="loading">
    <el-main>-->
    <el-row style="margin-bottom:10px">
      <el-col :span="24" :class="{'d-end':$route.query.is_sealed == 2}">
        <el-button size="medium" type="primary" @click="add()" v-if="$route.query.is_sealed == 1">新增</el-button>
        <el-button
          size="medium"
          :type="selectData.length>0?'danger':'info'"
          @click="del()"
          v-if="$route.query.is_sealed == 1"
        >删除</el-button>
        <el-button size="medium" type="info" v-if="$route.query.is_sealed == 2">已封存</el-button>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%;border:1px solid #ccc;"
      height="88%"
      @selection-change="handleSelectionChange"
      ref="table"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>

      <el-table-column label="序号" align="center">
        <template slot-scope="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="yj_lb" label="要件类别" align="center"></el-table-column>

      <el-table-column prop="yj_pfrq" label="批复日期" align="center"></el-table-column>
      <el-table-column prop="yj_pfdw" label="批复单位" show-overflow-tooltip align="center"></el-table-column>
      <el-table-column prop="yj_zjrq" label="组卷日期" align="center"></el-table-column>
      <el-table-column prop="yj_zjrq" label="附件" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.filesarr.length?scope.row.filesarr.length:'无'}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200px">
        <template slot-scope="scope">
          <el-button size="medium" type="primary" plain @click="look(scope.row)">查看</el-button>
          <el-button
            size="medium"
            type="primary"
            plain
            @click="edit(scope.row)"
            v-if="$route.query.is_sealed == 1"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </el-main>
    </el-container>-->
    <Ddialog
      :dialogFormVisible1="dialogFormVisible1"
      @close="close1"
      :item="item"
      :Lb="Lb"
      :lookOrEdit="lookOrEdit"
    />
    <transition name="delpop">
      <delPop @close="visible = false" v-if="visible" :data="deldata" />
    </transition>
  </div>
</template>

<script>
import Ddialog from "./dialog/Ddialog";
import delPop from "@/components/delPop";

export default {
  components: {
    Ddialog,
    delPop
  },
  data() {
    return {
      dialogFormVisible1: false,
      selectData: [],
      tableData: [],
      loading: false,
      item: {},
      Lb: [],
      lookOrEdit: 0, //1新增 2编辑 3查看
      visible: false,
      deldata: {}
    };
  },
  methods: {
    edit(item) {
      this.item = { ...item };
      this.lookOrEdit = 2;
      this.dialogFormVisible1 = !this.dialogFormVisible1;
    },
    look(item) {
      this.item = { ...item };
      this.lookOrEdit = 3;
      this.dialogFormVisible1 = !this.dialogFormVisible1;
    },
    add() {
      this.item = {};
      this.lookOrEdit = 1;
      this.dialogFormVisible1 = !this.dialogFormVisible1;
    },
    close1(item) {
      this.dialogFormVisible1 = false;
      if (item) {
        this.search();
      }
    },
    del() {
      if (!this.selectData.length) {
        this.$message({
          type: "error",
          message: "没有选中的条目"
        });
        return;
      }
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$post("/api/QqYjbl/deletesall", { id: this.selectData }).then(
            res => {
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success"
                });
                this.search();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSelectionChange(value) {
      this.selectData = value;
    },
    search() {
      this.loading = true;
      this.$get("/api/QqYjbl/index", { xm_id: this.xm_id }).then(res => {
        if (res.code == 200 && res.data) {
          this.tableData = res.data;
        }
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.loading = false;
      });
    }
  },
  computed: {
    xm_id() {
      return this.$route.query.xm_id || this.$route.params.xm_id;
    },
    xmmc() {
      return this.$route.query.xmmc;
    }
  },
  mounted() {
    this.search();
    this.$get("/api/index/codes", { pid: 7 }).then(res => {
      if (res.code == 200 && res.data) {
        this.Lb = res.data.list;
      }
    });
  },
  watch: {
    xm_id() {
      this.search();
    }
  }
};
</script>

<style scoped lang="less">
.main-main {
  width: 100%;
  height: calc(100%);
  .click {
    width: 100px;
    height: 100px;
    background: #ccc;
    cursor: pointer;
    position: absolute;
    right: 0;
    &:hover {
      border: 1px dashed #4098ff;
    }
  }
  .line {
    width: 2px;
    height: calc(100% - 40px);
    position: absolute;
    background: #ccc;
    bottom: 0;
    left: 20px;
  }
}
</style>